<script setup lang='ts'>
import useStore from '@/store';
import HomePanel from './HomePanel.vue';
import {useLazyDate} from '@/utils/hooks'

const {home} = useStore()

// 数据懒加载
const target = useLazyDate(() => {
  // 发请求
  home.getNewList()
})

// 当整个区块处于可见状态时，才发ajax
// const target = ref(null)
// onMounted(() => {
//   const {stop} = useIntersectionObserver(target.value, ([{isIntersecting}]) => {
//     if(isIntersecting) {
//       // 发请求
//       home.getNewList()

//       // 停止监听
//       stop()
//     }
//   })
// })

</script>

<template>
  <div ref="target">
    <HomePanel title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
      <Transition name="fade">
        <!-- 面板内容 -->
        <ul class="goods-list" v-if="home.newGoodList.length > 0">
          <li v-for="item in home.newGoodList" :key="item.id">
            <RouterLink :to="'/product/' + item.id">
              <img
                v-lazy="item.picture"
                alt=""
              />
              <p class="name ellipsis">{{item.name}}</p>
              <p class="price">&yen;{{item.price}}</p>
            </RouterLink>
          </li>
        </ul>
        <div class="home-skeleton" v-else>
          <div
            class="item"
            v-for="i in 4"
            :key="i"
            :style="{ backgroundColor: '#f0f9f4' }"
          >
            <XtxSkeleton bg="#e4e4e4" :width="306" :height="306" animated fade />
            <XtxSkeleton bg="#e4e4e4" :width="160" :height="24" animated fade />
            <XtxSkeleton bg="#e4e4e4" :width="120" :height="24" animated fade />
          </div>
        </div>
      </Transition>
      <template #right>
        <XtxMore path="/"></XtxMore>
      </template>
    </HomePanel>
  </div>
</template>

<style scoped lang="less">
  .fade-enter-active, .fade-leave-active{
    transition: all 3s;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }
</style>

<style scoped lang="less">
.home-skeleton {
  width: 1240px;
  height: 406px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 306px;
    .xtx-skeleton ~ .xtx-skeleton {
      display: block;
      margin: 16px auto 0;
    }
  }
}
</style>

<style lang='less' scoped>
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;
    li {
      width: 306px;
      height: 406px;
      background: #f0f9f4;
      .hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }
      .price {
        color: @priceColor;
      }
    }
  }
</style>